<template>
<!-- wrapper和content必须要这么包着
1.首先我们对bscroll封装，让组件对我们封装的有所依赖
 -->
    <div class="wrapper" ref="wrapper">
        <div class="content">
            <slot></slot>
        </div>
    </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
    props:{
        probeType:{
            type:Number
        },
        pullUpLoad:{
            type:Boolean,
            default: false
        }
    },
    data(){
        return {
            scroll:null
        }
    },
    mounted () {
        this.scroll = new BScroll(this.$refs.wrapper,{
            click:true,
            probeType:this.probeType,
            //1 触摸非实时
            //2.触摸
            //3.触摸 惯性
            pullUpLoad: this.pullUpLoad,
        })
            //监听滚动的位置
        this.scroll.on('scroll',(position)=>{
            this.$emit('scrollTop',-position.y)
        })

    },
    methods:{
        scrollTo(x,y,time=300){
            this.scroll&&this.scroll.scrollTo&&this.scroll.scrollTo(x,y,time)
        },
        finishPullUp(){
            this.scroll.finishPullUp()
        },
        //刷新
        refresh(){
            //this.scroll这个意思是防止图片加载完调用了这个组件refresh，而此时scroll还没创建
            this.scroll&&this.scroll.refresh()
        },

    }
};
</script>

<style lang="less" scoped>


</style>

